"use client"

import type React from "react"

interface DialogueBoxProps {
  response: string
  input: string
  onInputChange: (value: string) => void
  onSubmit: () => void
  disabled?: boolean
}

export function DialogueBox({ response, input, onInputChange, onSubmit, disabled = false }: DialogueBoxProps) {
  const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === "Enter" && !disabled) {
      onSubmit()
    }
  }

  return (
    <div className="w-full max-w-2xl mx-auto space-y-4">
      {response && (
        <div className="bg-white/90 rounded-2xl p-4 backdrop-blur-sm">
          <p className="text-gray-800 text-sm leading-relaxed">{response}</p>
        </div>
      )}

      <div className="flex gap-2">
        <input
          type="text"
          value={input}
          onChange={(e) => onInputChange(e.target.value)}
          onKeyPress={handleKeyPress}
          placeholder="输入说服内容（限50字）"
          maxLength={50}
          disabled={disabled}
          className="flex-1 px-4 py-3 rounded-full border-2 border-white/30 bg-white/90 backdrop-blur-sm text-gray-800 placeholder-gray-500 focus:outline-none focus:border-white focus:bg-white transition-all"
        />
        <button
          onClick={onSubmit}
          disabled={disabled || !input.trim()}
          className="px-6 py-3 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 text-white rounded-full font-medium transition-colors"
        >
          说服
        </button>
      </div>
    </div>
  )
}
